<!-- 创建加班活动 -->

<template>
	<div>
		<!-- <span>i love you</span><br>
		 <el-button @click="visible = true" >Button</el-button> -->
		 <div>
	<el-steps :active="active" finish-status="success" align-center>
	  <el-step title="创建加班"></el-step>
	  <el-step title="完成"></el-step>
	</el-steps>
	</div>
<!-- 	<el-button style="margin-bottom: 12px;" @click="next">下一步</el-button>
	 -->
	 <template v-if="active===0">
        <div style="margin: auto;">
          <el-divider>创建加班活动</el-divider>
          <el-form v-model="overtimeForm" label-width="100px" label-position="left"  style="padding-right: 7%;">
              <el-form-item label="加班时间">
                  <el-date-picker v-model="overtimeForm.overtimeRange" type="datetimerange" start-placeholder="加班开始时间"
                      range-separator="至" end-placeholder="加班结束时间"  size="medium" >
                  </el-date-picker>
			</el-form-item>
             
              <el-form-item label="加班原因">
                  <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="overtimeForm.overtimeReason" style="width: 40%;">
                  </el-input>
				
              </el-form-item>
              <el-form-item label="加班人员">
                  <!-- <el-checkbox v-model="" disabled>备选项</el-checkbox> -->
				  <template v-if="AllOver===false">
                  <div >  <!-- style="border: 1px solid gray;border-radius: 4px;" -->
                      <el-checkbox-group v-model="overtimeForm.overtimePeople" size="medium">
                          <el-checkbox v-for="employee in overtimeForm.overtimePeople" :label="employee" border>
                          </el-checkbox>
                      </el-checkbox-group>
                  </div>
				  </template>
				  <template v-else-if="AllOver===true">
					  <div>
					 <el-tag type="danger">全员加班</el-tag> 
					 </div>
				</template>
<!--               //   <el-button type="primary" @click="changeShowOvertimePeopleDialog">添加人员</el-button> -->
                   
					<el-button-group >
						<el-button type="primary" size="mini" @click="changeShowOvertimePeopleDialog">添加人员</el-button>
						<el-button type="primary" size="mini" @click="AllOverTime">集体加班</el-button>
					</el-button-group>
					 
                  <el-dialog title="选中员工" v-bind:visible="isShowOvertimePeopleDialog" v-bind:before-close="changeShowOvertimePeopleDialog">
                      <h1>okk</h1>
                      <el-checkbox-group v-model="overtimeForm.overtimePeople" size="medium">
                          <el-checkbox v-for="employee in employeesAll" :label="employee.userName" border> </el-checkbox>
                      </el-checkbox-group>
                  </el-dialog>
                  
              </el-form-item>
			  <br>
			  <br>
                 <div>
                     <el-button group type="primary" @click="open()" style="position: relative;left: 50px;" >
                         创建加班
                     </el-button>
                 				 
                 </div>  
          </el-form>
      </div>
	</template>
	<template v-else-if="active===1">
		<div>
			<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
			      <el-button @click="next()">完成</el-button>
			    </el-tooltip>
		</div>
	</template>
	
	         
</div>	  
  </template>

<script>
    export default {
        name: "createOvertimeActivity",
        data: function() {
            return {
				 active: 0,
                overtimeForm: {
                    overtimeRange: null, // 加班时间范围
                    overtimeReason: null, // 加班原因
                    overtimePeople: [] // 选中的人
                },
                employeesAll: [{
                        userId: "1",
                        userName: "kev1",
                        userType: "employee",
                        userAge: "22",
                        userPhoneNumber: "111111111",
                        userDepartmentId: "1",
                        userDepartmentName: "good to see"
                    },
                    {
                        userId: "2",
                        userName: "kev2",
                        userType: "employee",
                        userAge: "22",
                        userPhoneNumber: "111111111",
                        userDepartmentId: "1",
                        userDepartmentName: "good to see"
                    },
                    {
                        userId: "3",
                        userName: "kev3",
                        userType: "employee",
                        userAge: "22",
                        userPhoneNumber: "111111111",
                        userDepartmentId: "1",
                        userDepartmentName: "good to see"
                    },
                    {
                        userId: "4",
                        userName: "kev4",
                        userType: "employee",
                        userAge: "22",
                        userPhoneNumber: "111111111",
                        userDepartmentId: "1",
                        userDepartmentName: "good to see"
                    }
                ],
                isShowOvertimePeopleDialog: false,
				AllOver :false
            }
        },
        props: {},
        methods: {
			ClickTime:function(){
				console.log("success")
			},
			next:function() {
			        if (this.active++ > 0) this.active = 0;
			      },
            createOvertime: function() {
				this.next();
                console.log("overtimePeople");
                console.log(this.overtimeForm.overtimePeople);
            },
            changeShowOvertimePeopleDialog: function() {
				this.AllOver=false
                this.isShowOvertimePeopleDialog = !this.isShowOvertimePeopleDialog;
            },
			AllOverTime:function(){
				this.AllOver=true
				this.overtimeForm.overtimePeople=[];
				
			},
			 open:function() {
			        this.$confirm('确定创建该加班？', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.$message({
			            type: 'success',
			            message: '创建成功!'
			          });
					  
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消'
			          });          
			        });
			      }
			    
        },
        watch: {
            overtimeRange: function() {
                console.log(this.overtimeRange);
            },
            overtimeForm: {
                handler: function() {
                    console.log("overtimePeople");
                    console.log(this.overtimeForm.overtimePeople);
                },
                deep: true,
            }
        }
    }
</script>

<style>

</style>
